<template>
	<view class="question">
		<view class="title">
			<view class="line">
			</view>
			<view>
				{{question.moduleName}}
			</view>
		</view>
		<view class="e-question" v-for="(item,index) in question.dataList" :key="index">
			<view class="q-item">
				<view class="q-item-title-box">
					<view class="q-item-title-wrap">
						<view class="q-index">
							{{index+1}}、
						</view>
						<view class="q-item-title">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="q-item-content">
					<u-radio-group v-if="item.type === 'radio'" v-model="item.value" placement="column" wrap>
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(sitem, sindex) in item.options"
							:key="sindex" :name="sindex+1">
							<view class="content-wrap">
								<view class="q-content" :class="{'full-row':ssitem.type === 'upload'}"
									v-for="(ssitem,ssindex) in sitem.content" :key="ssindex">
									<view class="title-input" v-if="ssitem.type === 'input'">
										{{ssitem.value}}
									</view>
									<u-input style="width: 400rpx;" v-else-if="ssitem.type === 'text'" placeholder="請輸入"
										:border="true" v-model="ssitem.value"></u-input>
									<view v-else-if="ssitem.type === 'date'" class="date">
										<u-input placeholder="點擊選擇日期" :border="true" v-model="ssitem.value"
											@focus="(e)=>{showDatePop(e,ssitem)}"></u-input>
									</view>
									<view v-else-if="ssitem.type === 'time'" class="date">
										<u-input placeholder="點擊選擇時間" :border="true" v-model="ssitem.value"
											@focus="(e)=>{showTimePop(e,ssitem)}"></u-input>
									</view>
									<view v-else-if="ssitem.type === 'upload'" class="uppic">
										<view class="uppicborder">
											<view class="image-list">
												<view class="each-list" v-for="(image,imageIndex) in ssitem.fileList"
													:key='index'>
													<image class="show-image" :src="image" @click.stop="previewImage(image)" mode=""></image>
													<view class="close-image"
														@click.stop="deleteImage(ssitem,imageIndex)">
														<image src="../../../static/union@2x.png" mode=""></image>
													</view>
												</view>
											</view>
											<view class="up-btn center" @click.stop="uppic(ssitem)">
												<uni-icons type="plusempty" size="40"></uni-icons>
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-radio>
					</u-radio-group>
					<u-checkbox-group v-if="item.type === 'select'" wrap>
						<u-checkbox v-model="sitem.checked" @change="(e)=>{checkboxGroupChange(e,sitem)}"
							v-for="(sitem, sindex) in item.options" :key="sindex" :name="sindex+1">
							<view class="content-wrap">
								<view class="q-content" :class="{'full-row':ssitem.type === 'upload'}"
									v-for="(ssitem,ssindex) in sitem.content" :key="ssindex">
									<view class="title-input" v-if="ssitem.type === 'input'">
										{{ssitem.value}}
									</view>
									<u-input style="width: 400rpx;" v-else-if="ssitem.type === 'text'" placeholder="請輸入"
										:border="true" v-model="ssitem.value"></u-input>
									<view v-else-if="ssitem.type === 'date'" class="date">
										<u-input placeholder="點擊選擇日期" :border="true" v-model="ssitem.value"
											@focus="(e)=>{showDatePop(e,ssitem)}"></u-input>
									</view>
									<view v-else-if="ssitem.type === 'time'" class="date">
										<u-input placeholder="點擊選擇時間" :border="true" v-model="ssitem.value"
											@focus="(e)=>{showTimePop(e,ssitem)}"></u-input>
									</view>
									<view v-else-if="ssitem.type === 'upload'" class="uppic">
										<view class="uppicborder">
											<view class="image-list">
												<view class="each-list" v-for="(image,imageIndex) in ssitem.fileList"
													:key='index'>
													<image class="show-image" :src="image" @click.stop="previewImage(image)" mode=""></image>
													<view class="close-image"
														@click.stop="deleteImage(item,imageIndex)">
														<image src="../../../static/union@2x.png" mode=""></image>
													</view>
												</view>
											</view>
											<view class="up-btn center" @click.stop="uppic(ssitem)">
												<uni-icons type="plusempty" size="40"></uni-icons>
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-checkbox>
					</u-checkbox-group>
					<u-input style="width: 400rpx;" v-if="item.type === 'input'" v-model="item.value" class="disabled"
						placeholder="請輸入" :border="true"></u-input>
					<view v-if="item.type === 'upload'" class="uppic">
						<view class="uppicborder">
							<view class="image-list">
								<view class="each-list" v-for="(v,imageIndex) in item.fileList" :key='index'>
									<image class="show-image" :src="v" @click.stop="previewImage(v)" mode=""></image>
									<view class="close-image" @click.stop="deleteImage(v,imageIndex)">
										<image src="../../../static/union@2x.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="up-btn center" @click.stop="uppic(item)">
								<uni-icons type="plusempty" size="40"></uni-icons>
							</view>
						</view>
					</view>
					<u-input style="width: 400rpx;" v-if="item.type === 'date'" placeholder="點擊選擇日期"
						v-model="item.value" :border="true" @focus="(e)=>{showDatePop(e,item)}"></u-input>
					<u-input style="width: 400rpx;" v-if="item.type === 'time'" placeholder="點擊選擇時間"
						v-model="item.value" :border="true" @focus="(e)=>{showTimePop(e,item)}"></u-input>
					<view v-if="item.exampleFileList&&item.exampleFileList.length" class="tip-image">
						<view class="tips">
							示意圖
						</view>
						<view class="image-list">
							<view class="each-list" v-for="(v,imageIndex) in item.exampleFileList" :key='index'>
								<image class="show-image" :src="v" @click.stop="previewImage(v)" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="show" mode="date" @change="onDateChange" max-date="2050-12-31"></u-calendar>
		<u-action-sheet :list="list" v-model="showSheet" @click="onSheetClick"></u-action-sheet>
		<u-popup v-model="showPopup" border-radius="14" mode="center" width="600rpx" height="300rpx">
			<view class="popup-content">
				<view class="popup-tips">
					提示
				</view>
				<view class="popup-c">
					{{popupTitle}}
				</view>
				<view class="popup-btns">
					<view class="btn" @click="showPopup = false">
						取消
					</view>
					<view class="btn" @click="onComfirm">
						確定
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="multiSelector" v-model="showTime" :defaultIndex=[0,0]  :range="multiSelector" @confirm="onTimeConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/api/url.js"
	export default {
		name: 'eachQuestion',
		props: {
			question: {
				type: Object,
				default () {
					return {}
				}
			},
			questionsType: {
				type: String,
				default () {
					return 'add' // add 新增 edit 編輯 look 查看 answer 回答
				}
			}
		},
		data() {
			return {
				show: false,
				showSheet: false,
				showPopup: false,
				list: [{
						text: '單項填空',
						type: 'input-text'
					},
					{
						text: '用戶輸入框',
						type: 'text'
					},
					{
						text: '選項描述框',
						type: 'input'
					},
					{
						text: '日期',
						type: 'date'
					},
					{
						text: '上傳圖片',
						type: 'upload'
					},
				],
				popupTitle: '',
				curDateModule: null,
				deleteType: null,
				action: baseUrl + '/api/apict/uploadfile',
				multiSelector: [],
				showTime:false
			}
		},
		created(){
			this.generateData()
		},
		methods: {
			generateData() {
			      const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
			      const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
			      this.multiSelector = [hours, minutes];
			    },
			showDatePop(e, modules) {
				this.curDateModule = modules
				this.show = true
			},
			onDateChange(e) {
				console.log(e)
				const {
					year,
					month,
					day
				} = e
				this.curDateModule.value = `${year}-${month}-${day}`
			},
			showTimePop(e, modules){
				this.curDateModule = modules
				this.showTime = true
			},
			onTimeConfirm(e){
				const [index,index1=0] = e
				let hours = this.multiSelector[0][index]
				let minutes = this.multiSelector[1][index1]
				this.curDateModule.value = hours+':'+minutes
			},
			checkboxGroupChange(e, item) {
				console.log(e, item)
			},
			uppic(target) {
				uni.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$Loading("上传中")
						let uploadedCount = 0;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								header: {
									'token': uni.getStorageSync('userToken')
								},
								url: this.action, //仅为示例，非真实的接口地址
								filePath: item,
								formData: {
									uid: uni.getStorageSync("uid")
								},
								name: 'file',
								success: (uploadFileRes) => {
									console.log(444, target)
									let data = JSON.parse(uploadFileRes.data);
									if (data.data.code === 1) {
										target.fileList.push(baseUrl + data.data.url)
										console.log(333, target)
									} else {
										this.$Toast(data.msg)
									}
								},
								fail: (err) => {
									let errMsg = JSON.parse(err.data)
									this.$Toast(errMsg.msg)
								},
								complete: () => {
									this.$Toast("上传成功")
								}
							});
						})

					}
				});
			},
			deleteImage(target, index) {
				target.fileList.splice(index, 1)
			},
			previewImage(image){
				console.log(image)
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.question {
		padding: 24rpx 24rpx 0;

		.title {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			color: #333333;
			background: #fff;

			.line {
				width: 4rpx;
				height: 28rpx;
				margin-right: 24rpx;
				background: #5289FC;
				border-radius: 1rpx 1rpx 1rpx 1rpx;
			}
		}

		.e-question {
			background: #F6F6F6;

			.q-item {
				border: 1px solid #F6F6F6;
				border-radius: 10rpx;
				padding: 24rpx;

				.q-item-title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.q-item-title-wrap {
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
					}

					.delete-question {
						color: #409eff;
						cursor: pointer;
					}
				}
			}

			.q-item-content {
				padding: 0 48rpx;
			}

			.content-wrap {
				display: flex;
				padding: 12rpx 0;
				flex-wrap: wrap;
				align-items: center;
				gap: 12rpx;
			}

			.component {
				margin: 4rpx 12rpx;
				color: #409eff;
				cursor: pointer;
				position: relative;

				.op-list {
					position: absolute;
					right: -200rpx;
					bottom: 0;
					background: red;
					width: 200rpx;
					height: 400rpx;
					z-index: 1;
				}
			}
		}
	}

	.full-row {
		width: 100%;
	}

	.popup-content {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 300rpx;

		.popup-tips {
			font-size: 36rpx;
			text-align: center;
			color: red;
		}

		.popup-btns {
			display: flex;
			width: 100%;
			border-top: 1px solid #ebedf0;

			.btn {
				width: 50%;
				text-align: center;
				line-height: 88rpx;
				cursor: pointer;

				&:first-child {
					border-right: 1px solid #ebedf0;
					color: #323233;
				}

				&:last-child {
					color: red;
				}
			}
		}
	}

	::v-deep .u-radio__icon-wrap {
		margin-top: 32rpx;
	}

	::v-deep .u-radio {
		align-items: flex-start;
	}

	::v-deep .u-checkbox {
		align-items: flex-start;
	}

	::v-deep .u-checkbox__icon-wrap--square {
		margin-top: 32rpx;
	}

	.title-input {
		line-height: 74rpx;
	}

	.uppicborder {
		display: flex;
		align-items: center;
		gap: 24rpx;
		flex-wrap: wrap;

		.up-btn {
			width: 180rpx;
			height: 180rpx;
			outline: 1px solid #E7E7E7;
			border-radius: 4rpx;
		}
	}

	.image-list {
		display: flex;
		gap: 24rpx;
		flex-wrap: wrap;

		.each-list {
			position: relative;
			width: 180rpx;
			height: 180rpx;

			.show-image {
				width: 180rpx;
				height: 180rpx;
				outline: 1px solid #E7E7E7;
				border-radius: 4rpx;
			}

			.close-image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(0, 0, 0, 0.4);
				border-top-right-radius: 4rpx;
				cursor: pointer;

				>image {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}
	}

	.tip-image {
		.tips {
			margin: 24rpx 0;
			color: rgb(41, 121, 255);
		}
	}
</style>